<template>
  <!-- <img src="@/assets/img/bg.png" class="app-bg" /> -->
  <vue-particles
    color="#9494FF"
    :particleOpacity="1"
    :particlesNumber="70"
    shapeType="circle"
    :particleSize="2"
    linesColor="#fff"
    :linesWidth="0"
    :lineLinked="false"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="5"
    :hoverEffect="false"
    hoverMode="grab"
    :clickEffect="false"
    clickMode="push"
  >
  </vue-particles>
  <div class="index">
    <img src="@/assets/img/tit.png" @click="toReload()" class="tit-img" />
    <!-- <div class="titles" @click="toReload()"></div> -->
    <div class="main flex between">
      <div class="mian-left">
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>工作动态分析情况</div>
        </div>
        <div class="item item1 font" @click="toShow6()">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div
            class="item-main flex align between wrap"
            v-if="setList.length != 0"
          >
            <div class="act-item flex align">
              <img src="@/assets/img/icon1.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[0].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[0].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon1-a.png" />
              </div>
            </div>
            <div class="act-item flex align">
              <img src="@/assets/img/icon2.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[1].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[1].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon2-a.png" />
              </div>
            </div>
            <div class="act-item flex align">
              <img src="@/assets/img/icon3.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[2].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[2].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon3-a.png" />
              </div>
            </div>
            <div class="act-item flex align">
              <img src="@/assets/img/icon4.png" class="icon" />
              <div class="act-info">
                <div class="flex align between">
                  <div>{{ setList[3].name }}</div>
                  <div class="num" style="color: #24a9ff">
                    {{ setList[3].count }}
                  </div>
                </div>
                <img src="@/assets/img/icon4-a.png" />
              </div>
            </div>
          </div>
        </div>
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>网上代表联络站意见建议统计</div>
        </div>
        <div class="item item2">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div class="item-main">
            <el-row class="chart1" id="chart1"></el-row>
          </div>
        </div>
        <div class="item-tit font" @click="toShow6()">
          <img src="@/assets/img/title.png" class="tit" />
          <div>信息发布</div>
        </div>
        <div class="item item3">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <vue3-seamless-scroll
                :list="list2"
                :hover="true"
                class="seamless-warp scroll seamless-warp-item3"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item2 flex between"
                  v-for="(item, index) in list2"
                  @click="toInfo(item.id)"
                  :key="index"
                >
                  <div class="item3-tit3">{{ item.title }}</div>
                  <div class="time3">{{ item.create_time }}</div>
                </div>
              </vue3-seamless-scroll>
            </div>
            <!-- <el-row class="chart1" id="chart1"></el-row> -->
          </div>
        </div>
      </div>
      <div class="mian-center">
        <div class="item">
          <!-- <img src="@/assets/img/bg2.png" class="bg2" /> -->
          <div class="item-main">
            <!-- <div class="total" v-if="map_item != ''">
              <img src="@/assets/img/bg5.png" />
              <div class="total-tit">{{ map_item.name }}联络站信息</div>
              <div class="total-num">联系人: {{ map_item.contact_name }}</div>
              <div class="total-num">
                联系方式：{{ map_item.contact_phone }}
              </div>
              <div class="total-num" v-if="map_item.address != ''">
                地址：{{ map_item.address }}
              </div>
              <div class="total-num">
                代表数量：{{ map_item.member_count }}个
              </div>
              <div class="total-btn" @click="toShow4()">查看详情</div>
            </div> -->
            <div class="center-map">
              <!-- <div class="total" v-if="name == ''">
              <div class="total-tit">网格总数</div>
              <div class="total-num">{{ total }}<span>处</span></div>
            </div> -->

              <img src="@/assets/img/map.png" class="map" />
              <div
                class="map-item"
                @click="toActive(item)"
                :style="'left:' + item.left + ';top:' + item.top"
                v-for="(item, index) in list3"
                :key="index"
              >
                <img src="@/assets/img/icon-a.png" v-if="map_id == item.id" />
                <img src="@/assets/img/icon.png" v-else />
                <div>{{ item.name }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mian-right">
        <div class="item-tit font" @click="toShow9()">
          <img src="@/assets/img/title.png" class="tit" />
          <div>
            代表履职情况
            <span style="color: #ffdd00" v-if="map_item != ''"
              >—{{ map_item.name }}</span
            >
          </div>
        </div>
        <div class="item item4">
          <img src="@/assets/img/bg3.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <div class="flex align between list-nav">
                <div class="list-flex">代表</div>
                <div class="list-flex">姓名</div>
                <div class="list-flex">单位及职务</div>
                <div class="list-flex">履职积分</div>
              </div>
              <vue3-seamless-scroll
                v-if="memberList2.length != 0"
                ref="seamlessScoll"
                :list="memberList2"
                :hover="true"
                class="seamless-warp scroll scroll3 seamless-warpRZ"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item3"
                  v-for="(item, index) in memberList2"
                  :key="index"
                  @click="
                    item.attachment != '' ? toOpenOffic(item.attachment) : ''
                  "
                >
                  <div class="flex align between scroll3">
                    <div class="list-flex">
                      <img
                        class="head"
                        v-if="item.id_photo == ''"
                        src="@/assets/img/head2.png"
                      />
                      <img class="head" v-else :src="item.id_photo" />
                    </div>
                    <div class="list-flex">{{ item.truename }}</div>
                    <div
                      class="list-flex position"
                      v-html="item.position"
                    ></div>
                    <div class="list-flex">
                      {{ item.deal_count == 0 ? "—" : item.deal_count }}
                    </div>
                  </div>
                </div>
              </vue3-seamless-scroll>
              <div class="zan" v-if="memberList2.length == 0">暂无数据</div>
            </div>
          </div>
        </div>
        <div class="item-tit font" @click="toShow10()">
          <img src="@/assets/img/title.png" class="tit" />
          <div>
            建议公开
            <span style="color: #ffdd00" v-if="map_item != ''"
              >—{{ map_item.name }}</span
            >
          </div>
        </div>
        <div class="item item3">
          <img src="@/assets/img/bg2.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <vue3-seamless-scroll
                :list="list5"
                :hover="true"
                class="seamless-warp scroll"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item2"
                  v-for="(item, index) in list5"
                  @click="toInfo2(item.id)"
                  :key="index"
                >
                  <div class="content" v-html="item.content"></div>
                  <div class="flex between time">
                    <div class="time">标题：{{ item.title }}</div>
                    <div class="time" style="font-weight: bold">
                      {{ item.status_text }}
                    </div>
                  </div>
                </div>
              </vue3-seamless-scroll>
              <div class="zan" v-if="list5.length == 0">暂无数据</div>
            </div>
          </div>
        </div>
        <div class="item-tit font" @click="toShow11()">
          <img src="@/assets/img/title.png" class="tit" />
          <div>民生实事</div>
        </div>
        <div class="item item6">
          <img src="@/assets/img/bg3.png" class="bg2" />
          <div class="item-main">
            <div class="list2">
              <div class="flex align between list-nav">
                <div class="list-flex">项目名称</div>
                <div class="list-flex">项目内容</div>
                <div class="list-flex">进展情况</div>
              </div>
              <vue3-seamless-scroll
                :list="list4"
                :hover="true"
                class="seamless-warp scroll"
                direction="down"
                :step="0.2"
              >
                <div
                  class="list-item list-item6"
                  v-for="(item, index) in list4"
                  @click="toInfo4(item)"
                  :key="index"
                >
                  <div class="flex align between">
                    <div class="list-flex">{{ item.name }}</div>
                    <div class="list-flex">{{ item.content }}</div>
                    <div class="list-flex">{{ item.progress_desc }}</div>
                  </div>
                </div>
              </vue3-seamless-scroll>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="show"
      style="z-index: 8"
      v-if="show"
      @click="toCancelshow1()"
    ></div>
    <div class="show-con" style="z-index: 8" v-if="show">
      <div class="show-main">
        <div class="show-main-con show-main-conN" v-if="type == 1">
          <el-scrollbar
            ref="scrollbarRef3"
            style="height: 100%"
            always
            @scroll="scroll3"
          >
            <div class="con-tit">{{ info.title }}</div>
            <div class="con-time">{{ info.create_time }}</div>
            <div class="con-content" v-html="info.content"></div>
          </el-scrollbar>
        </div>
        <div class="show-main-con" style="height: auto" v-if="type == 2">
          <div class="con-tit con-tit2">{{ info.title }}</div>
          <!-- <div class="con-time con-time2">提交时间：{{ info.create_time }}</div> -->
          <div class="con-content con-content2" v-html="info.content"></div>
          <div
            class="con-content reply_content"
            v-if="info.reply_content != ''"
          >
            办理情况：
            <div v-html="info.reply_content"></div>

            <!-- {{ info.reply_content }} -->
          </div>
          <!-- <div class="con-time" style="color: #ffdd00">已办结</div> -->
        </div>
        <div class="show-main-con" v-if="type == 3">
          <div class="con-tit con-tit2">{{ info.name }}</div>
          <!-- <div class="con-time con-time2">提交时间：{{ info.create_time }}</div> -->
          <div class="con-content con-content2" v-html="info.content"></div>
          <div
            class="con-content reply_content"
            v-if="info.progress_desc != ''"
          >
            进展情况：
            <div v-html="info.progress_desc"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="show" v-if="show4" @click="toCancelshow4()"></div>
    <div class="show4" v-if="show4">
      <img src="@/assets/img/bg6.png" class="show-bg" />
      <div class="show4-con">
        <div class="item-tit font">
          <img src="@/assets/img/title.png" class="tit" />
          <div>{{ map_item.name }}镇联络站</div>
        </div>
        <div class="show4-intro">
          <el-scrollbar
            ref="scrollbarRef4"
            style="height: 100%"
            always
            @scroll="scroll4"
          >
            <div v-html="map_item.intro_content"></div>
          </el-scrollbar>
          <!-- <div>联系方式：{{ map_item.contact_phone }}</div>
          <div v-if="map_item.address != ''">地址：{{ map_item.address }}</div> -->
        </div>
        <div class="item-tit font" @click="toShow9()">
          <img src="@/assets/img/title.png" class="tit" />
          <div>人大代表{{ memberListTotal }}位</div>
        </div>
        <vue3-seamless-scroll
          :list="memberList1"
          :hover="true"
          class="seamless-warp scroll scroll3"
          direction="left"
          :step="0.5"
        >
          <div class="flex align">
            <div
              v-for="(item, index) in memberList1"
              :key="index"
              @click="item.attachment != '' ? toOpenOffic(item.attachment) : ''"
            >
              <div class="show4-list">
                <img src="@/assets/img/head3.png" v-if="item.id_photo == ''" />
                <img :src="item.id_photo" v-else />
                <div class="flex between">
                  <span>姓名</span>
                  <div style="width: 76%">{{ item.truename }}</div>
                </div>
                <div class="flex between">
                  <span>性别</span>
                  <div style="width: 76%">
                    {{ item.sex == 1 ? "男" : "女" }}
                  </div>
                </div>
                <div class="flex between">
                  <span>职务</span>
                  <div style="width: 76%" v-html="item.position"></div>
                </div>
              </div>
              <!-- <div class="show4-list">
                <div class="show4-list-tit">在办事项</div>
                <div class="item-main">
                  <div class="list2">
                    <vue3-seamless-scroll
                      :list="list3"
                      :hover="true"
                      class="seamless-warp scroll"
                      direction="down"
                      :step="0.2"
                    >
                      <div
                        class="list-item list-item2"
                        v-for="(item, index) in list3"
                        :key="index"
                      >
                        <div>关于南昌市主城区通往安义县、进贤县高速....</div>
                        <div class="time">2024-08-29</div>
                      </div>
                    </vue3-seamless-scroll>
                  </div>
                </div>
              </div> -->
            </div>
          </div>
        </vue3-seamless-scroll>
      </div>
    </div>
    <div class="show show5" v-if="show5" @click="toCancelshow5()">
      <div class="show5-con flex align between">
        <div class="head-img">
          <img src="@/assets/img/head_bg.png" class="head_bg" />
          <img src="@/assets/img/head_a.png" class="head_a" />
        </div>
        <div class="show5-con">
          <el-carousel height="882px">
            <el-carousel-item
              v-for="item in list"
              :key="item"
              :interval="1000"
              autoplay
            >
              <div class="con1" v-html="item.content"></div>
              <div class="con2">——{{ item.title }}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="show" v-show="show6" @click="toCancelshow6()"></div>
    <div class="show-con show6-con" v-show="show6">
      <div v-show="show6T == 1">
        <div
          class="list-item6 flex align"
          @click="toInfo3(item.id)"
          v-for="(item, index) in listArticle"
          :key="index"
        >
          <img :src="item.cover" />
          <div class="item6-info">
            <div>{{ item.title }}</div>
            <div>{{ item.create_time }}</div>
          </div>
        </div>
        <div class="flex align" style="justify-content: center">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleSizeChange"
            v-model:current-page="page"
            :total="listTotal"
            :page-size="6"
          />
        </div>
      </div>
      <div class="show-main" v-show="show6T == 2">
        <div class="show6TRe" @click="toShow6T()">返回</div>
        <div class="show-main-con">
          <el-scrollbar
            ref="scrollbarRef2"
            style="height: 100%"
            always
            @scroll="scroll2"
          >
            <div class="con-tit">{{ info.title }}</div>
            <div class="con-time">{{ info.create_time }}</div>
            <div class="con-content" v-html="info.content"></div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div
      class="show"
      style="z-index: 10"
      v-show="show8"
      @click="toCancelshow8()"
    ></div>
    <div class="show-con show6-con" style="z-index: 10" v-show="show8">
      <el-scrollbar
        ref="scrollbarRef"
        style="height: 100%; background: #fff"
        always
        @scroll="scroll"
      >
        <div class="zan" v-if="showZan">加载中...</div>
        <vue-office-docx
          :src="docxFile"
          @rendered="renderedHandler"
          @error="errorHandler"
        />
        <!-- <iframe style="width:100%;height:100%" src="https://mp.weixin.qq.com/s/5uV0syzsw4LjW1mJGMKhFA"></iframe> -->
      </el-scrollbar>
    </div>
    <!-- 履职代表分页 -->
    <div
      class="show"
      v-show="show9"
      style="z-index: 7"
      @click="toCancelshow9()"
    ></div>
    <div
      class="show-con show6-con"
      style="height: 82%; z-index: 7"
      v-show="show9"
    >
      <div
        style="
          text-align: center;
          font-size: 1.5vw;
          margin-bottom: 0.5vw;
          color: #ffdd00;
        "
      >
        <span v-if="map_item != ''">{{ map_item.name }}</span>
        履职代表
      </div>
      <div class="flex align wrap" style="justify-content: space-around">
        <div
          style="width: 30%"
          class="list-item6 flex"
          @click="item.attachment != '' ? toOpenOffic(item.attachment) : ''"
          v-for="(item, index) in memberListPage"
          :key="index"
        >
          <img :src="item.id_photo" class="id_photo" />
          <div class="item6-info">
            <div>{{ item.truename }}</div>
            <div style="margin: 0.5vw 0 1.5vw">
              {{ item.sex == 1 ? "男" : "女" }}
            </div>
            <div v-html="item.position"></div>
          </div>
        </div>
      </div>
      <div class="flex align" style="justify-content: center">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleSizeChange2"
          v-model:current-page="page2"
          :total="listTotalPage"
          :page-size="12"
        />
      </div>
    </div>
    <!-- 建议公开分页 -->
    <div
      class="show"
      v-show="show10"
      style="z-index: 7"
      @click="toCancelshow10()"
    ></div>
    <div
      class="show-con show6-con show10"
      style="height: 82%; z-index: 7"
      v-show="show10"
    >
      <div
        style="
          text-align: center;
          font-size: 1.5vw;
          margin-bottom: 0.5vw;
          color: #ffdd00;
        "
      >
        <span v-if="map_item != ''">{{ map_item.name }}</span>
        建议公开
      </div>
      <div class="flex align wrap" style="justify-content: space-around">
        <div
          style="width: 45%"
          class="list-item6 flex"
          @click="toInfo2(item.id)"
          v-for="(item, index) in memberListPage2"
          :key="index"
        >
          <!-- <img :src="item.id_photo" class="id_photo" /> -->
          <div class="item6-info" style="width: 100%">
            <div class="show10Title">{{ item.title }}</div>
            <div class="contentHtml" v-html="item.content"></div>
            <div class="flex between show10Time">
              <span>标题：{{ item.title }}</span>
              <div>
                {{ item.status_text }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex align" style="justify-content: center">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleSizeChange3"
          v-model:current-page="page3"
          :total="listTotalPage2"
          :page-size="12"
        />
      </div>
    </div>
    <!-- 民生实事 -->
    <div
      class="show"
      v-show="show11"
      style="z-index: 7"
      @click="toCancelshow11()"
    ></div>
    <div
      class="show-con show6-con show10"
      style="height: 82%; z-index: 7"
      v-show="show11"
    >
      <!-- {{ map_item.name }} -->
      <div
        style="
          text-align: center;
          font-size: 1.5vw;
          margin-bottom: 0.5vw;
          color: #ffdd00;
        "
      >
        民生实事
      </div>
      <div class="flex align wrap" style="justify-content: space-around">
        <div
          style="width: 45%"
          class="list-item6 flex"
          @click="toInfo4(item)"
          v-for="(item, index) in projectList"
          :key="index"
        >
          <!-- <img :src="item.id_photo" class="id_photo" /> -->
          <div class="item6-info" style="width: 100%">
            <div class="show10Title">{{ item.title }}</div>
            <div class="contentHtml contentHtml2" v-html="item.content"></div>
            <div class="flex between show10Time">
              <span>项目名称：{{ item.name }}</span>
              <div>
                {{ item.status_text }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex align" style="justify-content: center; margin-top: 1vw">
        <el-pagination
          background
          layout="prev, pager, next"
          @current-change="handleSizeChange4"
          v-model:current-page="page4"
          :total="listTotalPage3"
          :page-size="12"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { article, position, setting, station, project } from "@/api/apiData";
import VueOfficeDocx from "@vue-office/docx";
let newWindow;
export default {
  components: { Vue3SeamlessScroll, VueOfficeDocx },
  data() {
    return {
      memberListTotal: 0,
      timer: null,
      listData: [],
      show: false,
      show2: false,
      show3: false,
      show4: false,
      show5: true,
      show6: false,
      showChart: false,
      total: 0,
      nums: "",
      list: [],
      setList: [],
      list2: [],
      list3: [],
      articleList: [],
      titNum: 1,
      info: "",
      regionList: [],
      regionList2: [],
      regionList3: [],
      map_id: "",
      gridList: [],
      name: "",
      status: false,
      list4: [],
      list5: [],
      type: 1,
      group: [],
      memberList1: [],
      memberList2: [],
      memberList3: [],
      memberList4: [],
      memberList5: [],
      memberSum: 0,
      groupName: "",
      memberSum2: 0,
      leader: "",
      deputy_leader: "",
      content: "",
      map_item: "",
      show6T: 1,
      station_id: "",
      listArticle: [],
      listTotal: 0,
      page: 1,
      ws: null,
      queryType: "",
      show7: false,
      show8: false,
      show9: false,
      show10: false,
      show11: false,
      newWindow: null,
      docxFile: "",
      scrollTop: 0,
      loading: null,
      showZan: false,
      memberListPage: [],
      listTotalPage: 0,
      page2: 1,
      memberListPage2: [],
      listTotalPage2: 0,
      page3: 1,
      memberListPage3: [],
      listTotalPage3: 0,
      page4: 1,
      projectList: [],
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.beforeUrl = from.path;
    });
  },
  mounted() {
    this.connectWebSocket();
    let queryType = this.$route.query.type;
    if (queryType) {
      this.queryType = queryType;
      if (queryType == "show") {
        this.ws.onmessage = (event) => {
          const message = JSON.parse(event.data); // 假设服务器发送的是JSON格式的数据
          // console.log(message);
          if (message.name == "toCancelshow5") {
            this.toCancelshow5();
          }
          if (message.name == "toShow6") {
            this.toShow6();
          }
          if (message.name == "toShow9") {
            this.toShow9();
          }
          if (message.name == "toShow10") {
            this.toShow10();
          }
          if (message.name == "toShow11") {
            this.toShow11();
          }
          if (message.name == "toCancelshow6") {
            this.toCancelshow6();
          }
          if (message.name == "toShowChart") {
            this.toShowChart();
          }
          if (message.name == "toCancelshow1") {
            this.toCancelshow1();
          }
          if (message.name == "toCancelshow4") {
            this.toCancelshow4();
          }
          // if (message.name == "getShow") {
          //   this.getShow();
          // }
          if (message.name == "toReload") {
            this.toReload();
          }
          if (message.name == "handleSizeChange") {
            this.handleSizeChange(message.page);
          }
          if (message.name == "handleSizeChange2") {
            this.handleSizeChange2(message.page);
          }
          if (message.name == "handleSizeChange3") {
            this.handleSizeChange3(message.page);
          }
          if (message.name == "handleSizeChange4") {
            this.handleSizeChange4(message.page);
          }
          if (message.name == "toInfo") {
            this.toInfo(message.id);
          }
          if (message.name == "toInfo3") {
            this.toInfo3(message.id);
          }
          if (message.name == "toInfo2") {
            this.toInfo2(message.id);
          }
          if (message.name == "toInfo4") {
            this.toInfo4(message.item);
          }
          if (message.name == "toActive") {
            this.toActive(message.item);
          }
          if (message.name == "toShow4") {
            this.toShow4();
          }
          if (message.name == "toOpenOffic") {
            this.toOpenOffic(message.url);
          }
          if (message.name == "closed") {
            this.closed();
          }
          if (message.name == "toCancelshow8") {
            this.toCancelshow8();
          }
          if (message.name == "toShow6T") {
            this.toShow6T();
          }
          if (message.name == "scrollTop") {
            this.$refs.scrollbarRef.setScrollTop(message.scrollTop);
          }
          if (message.name == "scrollTop2") {
            this.$refs.scrollbarRef2.setScrollTop(message.scrollTop);
          }
          if (message.name == "scrollTop3") {
            this.$refs.scrollbarRef3.setScrollTop(message.scrollTop);
          }
          if (message.name == "scrollTop4") {
            this.$refs.scrollbarRef4.setScrollTop(message.scrollTop);
          }
          if (message.name == "toCancelshow9") {
            this.toCancelshow9();
          }
          if (message.name == "toCancelshow10") {
            this.toCancelshow10();
          }
          if (message.name == "toCancelshow11") {
            this.toCancelshow11();
          }
        };
      }
    }
    this.getData();
    // this.toShowChart();
    // this.getList(1);
    // this.getChart2();
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close(); // 关闭WebSocket连接
    }
  },
  methods: {
    toScollRe() {
      this.show6T = 1;
      this.type = 1;
      if (this.$refs.scrollbarRef) {
        this.$refs.scrollbarRef.setScrollTop(0);
      }
      if (this.$refs.scrollbarRef2) {
        this.$refs.scrollbarRef2.setScrollTop(0);
      }
      if (this.$refs.scrollbarRef3) {
        this.$refs.scrollbarRef3.setScrollTop(0);
      }
       if (this.$refs.scrollbarRef4) {
        this.$refs.scrollbarRef4.setScrollTop(0);
      }
    },
    toShow6T() {
      this.show6T = 1;
      if (this.queryType == "control") {
        this.sendData({ name: "toShow6T" });
      }
    },
    scroll(e) {
      // console.log(e)
      // this.scrollTop = e.scrollTop;
      if (this.queryType == "control") {
        this.sendData({ name: "scrollTop", scrollTop: e.scrollTop });
      }
    },
    scroll2(e) {
      // this.scrollTop2 = e.scrollTop;
      if (this.queryType == "control") {
        this.sendData({ name: "scrollTop2", scrollTop: e.scrollTop });
      }
    },
    scroll3(e) {
      // this.scrollTop2 = e.scrollTop;
      if (this.queryType == "control") {
        this.sendData({ name: "scrollTop3", scrollTop: e.scrollTop });
      }
    },
     scroll4(e) {
      // this.scrollTop2 = e.scrollTop;
      if (this.queryType == "control") {
        this.sendData({ name: "scrollTop4", scrollTop: e.scrollTop });
      }
    },
    renderedHandler() {
      console.log("文档渲染完成");
      this.showZan = false;
      // if (this.loading) {
      //   this.loading.close();
      // }
    },
    errorHandler(e) {
      this.showZan = false;
      console.error("渲染失败", e);
      // if (this.loading) {
      //   this.loading.close();
      // }
    },
    // 打开文档
    toOpenOffic(url) {
      this.showZan = true;
      if (this.queryType == "control") {
        this.sendData({ name: "toOpenOffic", url: url });
      }
      // this.loading = ElLoading.service({
      //   lock: true,
      //   text: "加载中",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      this.show8 = true;
      this.docxFile = url;
      // console.log(this.$refs.scrollbarRef)
      // setTimeout(()=>{
      // this.$refs.scrollbarRef.setScrollTop(1000)
      // },1000)
      // this.openCenteredWindow(
      //   `https://view.officeapps.live.com/op/view.aspx?src=` +
      //     encodeURIComponent(url)
      // );
    },
    // 连接
    connectWebSocket() {
      const wsUrl = "wss://ncxrd.jxscloudmedia.com/wss"; // 确保使用wss（WebSocket Secure）如果服务器支持
      this.ws = new WebSocket(wsUrl);
      this.ws.onopen = () => {
        console.log("连接已建立");
        // 这里可以发送初始化消息等
      };
      // this.ws.onmessage = (event) => {
      //   console.log("Message from server ", event.data);
      //   // 处理接收到的消息
      // };
      this.ws.onerror = (error) => {
        console.error("连接失败: ", error);
      };
      this.ws.onclose = () => {
        console.log("连接失败，重新连接");
        // 可以在这里尝试重新连接
        this.connectWebSocket();
      };
    },
    // 发送
    sendData(data) {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify(data)); // 确保发送JSON格式的数据
      } else {
        console.error("WebSocket is not open");
      }
    },
    toShow6() {
      this.show6 = true;
      this.getArticle();
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toShow6" });
      }
    },
    toShow9() {
      this.show9 = true;
      this.getMeberList();
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toShow9" });
      }
    },
    toShow10() {
      this.show10 = true;
      this.getFeedbackPage();
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toShow10" });
      }
    },
    toShow11() {
      this.show11 = true;
      this.getProjectList();
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toShow11" });
      }
    },
    toCancelshow1() {
      this.show = false;
      this.toScollRe();
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow1" });
      }
    },
    toCancelshow4() {
      this.toScollRe();
      this.show4 = false;
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow4" });
      }
    },
    toCancelshow5() {
      this.toScollRe();
      this.show5 = false;
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow5" });
      }
    },
    toCancelshow9() {
      this.toScollRe();
      this.show9 = false;
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow9" });
      }
    },
    toCancelshow10() {
      this.show10 = false;
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow10" });
      }
    },
    toCancelshow11() {
      this.show11 = false;
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow11" });
      }
    },
    toCancelshow6() {
      this.toScollRe();
      this.show6 = false;
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow6" });
      }
    },
    toCancelshow8() {
      this.toScollRe();
      this.show8 = false;
      this.docxFile = "";
      this.getTimer();
      if (this.queryType == "control") {
        this.sendData({ name: "toCancelshow8" });
      }
    },
    getTimer() {
      if (this.timer != null) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.getShow();
      }, 300000);
    },
    getShow() {
      // this.show5 = true;
      // if (this.queryType == "control") {
      //   this.sendData({ name: "getShow" });
      // }
      location.reload();
    },
    toShowChart() {
      this.showChart = true;
      this.getChart1();
      if (this.queryType == "control") {
        this.sendData({ name: "toShowChart" });
      }

      // station.feedbackAnalysis().then((res) => {
      //   let data = res.data;
      //   this.getChart1(data.data, data.name);
      // });
      // station.feedback.monthAnalysis().then((res) => {
      //   let data = res.data;
      //   this.getChart2(data);
      // });
    },
    toReload() {
      if (this.timer != null) {
        clearTimeout(this.timer);
      }
      if (this.queryType == "control") {
        this.sendData({ name: "toReload" });
      }
      location.reload();
    },
    getData() {
      position.list({ position_id: 1 }).then((res) => {
        if (res.code == 1) {
          this.list = res.data;
        }
      });
      setting.index().then((res) => {
        if (res.code == 1) {
          this.setList = res.data.gzdt.data;
        }
      });
      article.lists({ page: 1, size: 20 }).then((res) => {
        if (res.code == 1) {
          this.list2 = res.data.list;
        }
      });
      station.all().then((res) => {
        if (res.code == 1) {
          this.list3 = res.data;
          let data1 = [];
          let data2 = [];
          res.data.forEach((item) => {
            data1.push(item.feedback_count);
            data2.push(item.name);
          });
          this.getChart1(data1, data2);
        }
      });
      project.lists().then((res) => {
        if (res.code == 1) {
          this.list4 = res.data.list;
        }
      });
      station.memberList({ page: 1, size: 20 }).then((res) => {
        if (res.code == 1) {
          this.memberList2 = res.data.list;
        }
      });
      station.feedback.lists({ status: 4 }).then((res) => {
        if (res.code == 1) {
          this.list5 = res.data.list;
        }
      });
    },
    handleSizeChange(e) {
      console.log(e);
      this.page = e;
      this.getArticle();
      if (this.queryType == "control") {
        this.sendData({ name: "handleSizeChange", page: e });
      }
    },
    handleSizeChange2(e) {
      this.page2 = e;
      this.getMeberList();
      if (this.queryType == "control") {
        this.sendData({ name: "handleSizeChange2", page: e });
      }
    },
    handleSizeChange3(e) {
      this.page3 = e;
      this.getFeedbackPage();
      if (this.queryType == "control") {
        this.sendData({ name: "handleSizeChange3", page: e });
      }
    },
    handleSizeChange4(e) {
      this.page4 = e;
      this.getProjectList();
      if (this.queryType == "control") {
        this.sendData({ name: "handleSizeChange4", page: e });
      }
    },
    getProjectList() {
      project.lists({ page: this.page4, size: 12 }).then((res) => {
        if (res.code == 1) {
          this.projectList = res.data.list;
          this.listTotalPage = res.data.total;
        }
      });
    },
    getMeberList() {
      station
        .memberList({ page: this.page2, size: 12, station_id: this.map_id })
        .then((res) => {
          if (res.code == 1) {
            this.memberListPage = res.data.list;
            this.listTotalPage = res.data.total;
          }
        });
    },
    getArticle() {
      article.lists({ page: this.page, size: 6 }).then((res) => {
        if (res.code == 1) {
          this.listArticle = res.data.list;
          this.listTotal = res.data.total;
        }
      });
    },
    getData2(id) {
      this.memberList2 = [];
      this.list5 = [];
      station.memberList({ page: 1, size: 20, station_id: id }).then((res) => {
        if (res.code == 1) {
          this.memberList2 = res.data.list;
        }
      });
      station.feedback
        .lists({ page: 1, size: 20, station_id: id })
        .then((res) => {
          if (res.code == 1) {
            this.list5 = res.data.list;
          }
        });
    },
    getFeedbackPage() {
      station.feedback
        .lists({ page: this.page3, size: 8, station_id: this.map_item.id })
        .then((res) => {
          if (res.code == 1) {
            this.memberListPage2 = res.data.list;
            this.listTotalPage2 = res.data.total;
          }
        });
    },
    getChart1(data1, data2) {
      // let data2 = ["1月", "2月", "3月", "4月", "5月"];
      // let data1 = [7, 16, 8, 9, 5];
      const that = this;
      let myChart = this.$echarts.init(document.getElementById("chart1"));
      let option = {
        grid: {
          top: "5%", // 等价于 y: '16%'
          left: "2%",
          right: "2%",
          bottom: "15%",
          containLabel: true,
        },
        // legend: {
        //   data: [
        //     { name: "已办", textStyle: { color: "#fff" } },
        //     { name: "待办", textStyle: { color: "#fff" } },
        //   ],
        // },
        xAxis: {
          type: "category",
          data: data2,
          axisLabel: {
            interval: 0,
            show: true,
            color: "#ffffff",
            fontSize: 10,
            // 设置 formatter，使用 \n 进行换行
            formatter: function (params) {
              var str = ""; // 最终拼接成的字符串
              var paramsLen = params.length; // 获取每项文字的个数
              var len = 2; // 每行能显示的字的个数（根据实际情况自己设置）
              var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
              if (paramsLen > len) {
                //大于设定的len就换行，不大于就不变化
                for (var i = 0; i < rowNumber; i++) {
                  var temp = ""; // 表示每一次截取的字符串
                  var start = i * len; // 开始截取的位置
                  var end = start + len; // 结束截取的位置
                  if (i == rowNumber - 1) {
                    // 最后一次不换行
                    temp = params.substring(start, paramsLen);
                  } else {
                    // 每一次拼接字符串并换行
                    temp = params.substring(start, end) + "\n";
                  }
                  str += temp; // 最终拼成的字符串
                }
              } else {
                // 给新的字符串赋值
                str = params;
              }
              return str; //返回字符串
            },
          },
          type: "category",
        },
        yAxis: {
          splitLine: {
            show: true, // 显示分割线
            lineStyle: {
              color: "#b1adad", // 红色分割线
            },
          },
          axisLabel: {
            show: true,
            color: "#ffffff",
          },
          type: "value",
        },
        series: [
          {
            data: data1,
            type: "bar",
            label: {
              color: "#fff",
              show: true,
              position: "top", // 标签的位置，可以是'top'、'bottom'、'left'、'right'等
              formatter: "{c}", // {c} 表示系列中的数据值
            },
            itemStyle: {
              //渐变色
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "#FE6207" },
                  { offset: 1, color: "#F90D0A" },
                ],
              },
            },
          },
        ],
      };
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    getChart2() {
      let data2 = ["1月", "2月", "3月", "4月", "5月"];
      let data1 = [7, 16, 8, 9, 5];
      let data3 = [17, 21, 18, 29, 15];
      const that = this;
      let myChart = this.$echarts.init(document.getElementById("chart2"));
      let option = {
        grid: {
          top: "10%", // 等价于 y: '16%'
          left: "5%",
          right: "8%",
          bottom: "15%",
          containLabel: true,
        },
        legend: {
          data: [
            { name: "已办", textStyle: { color: "#fff" } },
            { name: "待办", textStyle: { color: "#fff" } },
          ],
        },
        xAxis: {
          type: "category",
          data: data2,
          axisLabel: {
            show: true,
            color: "#ffffff",
            fontSize: 14,
            // 设置 formatter，使用 \n 进行换行
            formatter: function (params) {
              var str = ""; // 最终拼接成的字符串
              var paramsLen = params.length; // 获取每项文字的个数
              var len = 8; // 每行能显示的字的个数（根据实际情况自己设置）
              var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
              if (paramsLen > len) {
                //大于设定的len就换行，不大于就不变化
                for (var i = 0; i < rowNumber; i++) {
                  var temp = ""; // 表示每一次截取的字符串
                  var start = i * len; // 开始截取的位置
                  var end = start + len; // 结束截取的位置
                  if (i == rowNumber - 1) {
                    // 最后一次不换行
                    temp = params.substring(start, paramsLen);
                  } else {
                    // 每一次拼接字符串并换行
                    temp = params.substring(start, end) + "\n";
                  }
                  str += temp; // 最终拼成的字符串
                }
              } else {
                // 给新的字符串赋值
                str = params;
              }
              return str; //返回字符串
            },
          },
          type: "category",
        },
        yAxis: {
          splitLine: {
            show: true, // 显示分割线
            lineStyle: {
              color: "#b1adad", // 红色分割线
            },
          },
          axisLabel: {
            show: true,
            color: "#ffffff",
          },
          type: "value",
        },
        series: [
          {
            name: "已办",
            data: data1,
            type: "bar",
            label: {
              color: "#fff",
              show: true,
              position: "top", // 标签的位置，可以是'top'、'bottom'、'left'、'right'等
              formatter: "{c}", // {c} 表示系列中的数据值
            },
            itemStyle: {
              //渐变色
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgba(106, 124, 250, 1)" },
                  { offset: 1, color: "rgba(54, 69, 176, 0.55)" },
                ],
              },
            },
          },
          {
            name: "待办",
            data: data3,
            type: "bar",
            label: {
              color: "#fff",
              show: true,
              position: "top", // 标签的位置，可以是'top'、'bottom'、'left'、'right'等
              formatter: "{c}", // {c} 表示系列中的数据值
            },
            itemStyle: {
              //渐变色
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: "rgba(7, 163, 209, 1)" },
                  { offset: 1, color: "rgba(1, 193, 243, 0.15)" },
                ],
              },
            },
          },
        ],
      };
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    openCenteredWindow(
      url,
      windowName = "centeredWindow",
      width = 1300,
      height = 800
    ) {
      // 计算窗口的左上角位置
      const left = (window.screen.width - width) / 2;
      const top = (window.screen.height - height) / 2; // 设置窗口特性
      const windowFeatures = `
 width=${width},
 height=${height},
 left=${left},
top=${top},
resizable=yes,
scrollbars=yes,
status=no
`; // 打开新窗口
      let that = this;
      newWindow = window.open(url, windowName, windowFeatures); // 检查是否成功打开窗口
      // if (!that.newWindow) {
      //   console.error("弹出窗口被浏览器阻止，请允许弹出窗口。");
      //   open();
      // }
      // if(that.newWindow){
      //   const unloadHandler=()=>{
      //      console.log('New window is about to be closed.');
      //       // if (this.queryType == "control") {
      //     //   this.sendData({ name: "closed"});
      //     // }
      //   }
      //   this.newWindow.onbeforeunload = unloadHandler
      // }
      var loop = setInterval(function () {
        console.log(newWindow);
        console.log(newWindow.top);
        if (newWindow.closed) {
          clearInterval(loop);
          if (that.queryType == "control") {
            that.sendData({ name: "closed" });
          }
        }
      }, 1000);
    },
    closed() {
      newWindow.close();
    },
    toShow2(n, m, z, y) {
      this.group = n;
      this.groupName = m;
      if (z) {
        this.leader = z;
        this.deputy_leader = y;
      } else {
        this.leader = "";
        this.deputy_leader = "";
      }
      this.show2 = true;
      this.getList();
    },
    toInfo(id) {
      if (this.queryType == "control") {
        this.sendData({ name: "toInfo", id: id });
      }
      this.getTimer();
      article.detail({ article_id: id }).then((res) => {
        this.type = 1;
        this.info = res.data;
        if (res.data.content == "") {
          this.openCenteredWindow(res.data.url);
        } else {
          this.show = true;
        }
      });
    },
    toInfo3(id) {
      if (this.queryType == "control") {
        this.sendData({ name: "toInfo3", id: id });
      }
      this.getTimer();
      article.detail({ article_id: id }).then((res) => {
        this.info = res.data;
        if (res.data.content == "") {
          this.openCenteredWindow(res.data.url);
        } else {
          this.show6T = 2;
        }
      });
    },
    toInfo2(id) {
      if (this.queryType == "control") {
        this.sendData({ name: "toInfo2", id: id });
      }
      this.show = true;
      this.info = "";
      station.feedback.detail({ feedback_id: id }).then((res) => {
        this.type = 2;
        this.info = res.data;
        this.getTimer();
      });
    },
    toInfo4(item) {
      if (this.queryType == "control") {
        this.sendData({ name: "toInfo4", item: item });
      }
      this.getTimer();
      this.type = 3;
      this.show = true;
      this.info = item;
    },
    toActive(item) {
      if (this.queryType == "control") {
        this.sendData({ name: "toActive", item: item });
      }
      this.getTimer();
      this.map_id = item.id;
      this.map_item = item;
      this.toShow4(item.id);
      this.getData2(item.id);
      // this.name = name;
      // this.gridList = this.regionList[i].gridList;
      // region.query({ parent_id: id }).then((res) => {
      //   this.gridList = res.data;
      // });
    },
    toShow4(id) {
      // if (this.type == "control") {
      //   this.sendData({ name: "toShow4" });
      // }
      this.getTimer();
      this.show4 = true;
      this.memberList1 = [];
      this.memberListTotal = 0;
      station.memberList({ station_id: id, page: 1, size: 20 }).then((res) => {
        if (res.code == 1) {
          this.memberList1 = res.data.list;
          this.memberListTotal = res.data.total;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.item-tit {
  position: relative;
  // width: 334px;
  // height: 50px;
  // line-height: 40px;
  color: #e5ecff;
  font-size: 26px;
  padding: 5px 32px;
  margin-bottom: 20px;
  img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
  }
  // div {
  //   margin-left: 30px;
  // }
}
.chart3 {
  width: 100%;
  height: 600px;
  margin-top: 50px;
}
.home {
  top: 30px;
  width: 80px;
}
.index {
  position: relative;
  z-index: 1;
  .titles {
    font-size: 44px;
    color: white;
    text-align: center;
    margin-top: 20px;
    position: relative;
    z-index: 2;
    height: 80px;
  }
  .main {
    margin: 50px 40px 0;
    .mian-left {
      width: 588px;
      .item1 {
        .item-main {
          .act-item {
            margin-bottom: 20px;
            .icon {
              width: 79.81px;
            }
            .act-info {
              font-size: 20px;
              color: white;
              margin-left: 8px;
              img {
                width: 161px;
                margin-top: 5px;
              }
              .num {
                font-size: 20px;
              }
            }
          }
        }
      }
    }
    .mian-center {
      width: 630px;
      position: relative;
      .item-main {
        padding: 0 !important;
      }
      .lianluo {
        width: 100%;
        height: 120px;
        color: #ffffff;
        font-size: 16px;
        text-align: center;
        position: relative;
        img {
          width: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .line {
          height: 100px;
          width: 3px;
          background: linear-gradient(to bottom, #0f4589, #3eb9dc, #0f4589);
        }
        .lianluo_tit {
          height: 120px;
          width: 150px;
          padding-top: 16px;
          div:nth-child(1) {
            color: #ffdd00;
            font-size: 46px;
          }
          div:nth-child(1) span {
            font-size: 12px;
            color: white;
          }
        }
        .seamless-warp2 {
          height: 80px;
          width: 600px;
          overflow: hidden;
        }
        .lianluo_item {
          height: 120px;
          width: 100px;
          div:nth-child(1) {
            color: #ffdd00;
            font-size: 26px;
            margin-bottom: 14px;
          }
          div:nth-child(1) span {
            font-size: 12px;
            color: white;
          }
        }
      }
      .total {
        position: absolute;
        left: 0px;
        z-index: 2;
        padding: 13px 16px;
        width: 149px;
        img {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: -1;
        }
        .total-tit {
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          margin-bottom: 13px;
        }
        .total-num {
          font-size: 14px;
          margin-bottom: 10px;
          color: #ffdd00;
        }
        .total-btn {
          width: 85px;
          color: white;
          background: linear-gradient(to bottom, #47cee6, #4fb8c1);
          font-size: 11px;
          margin: 13px auto;
          text-align: center;
          border-radius: 13px;
          padding: 3px 0;
        }
      }
      .center-map {
        width: 576px;
        position: relative;
        display: block;
        margin: 5% auto;
        .map {
          width: 100%;
        }
        .map-item {
          position: absolute;
          font-size: 16px;
          color: white;
          text-align: center;
          img {
            width: 37px;
          }
        }
        // .map-item_0{
        //     top: 0;
        //     left: 0;
        //   }
        //   .map-item_1{
        //     top: 20px;
        //   }
      }
    }
    .mian-right {
      width: 588px;
    }

    .item {
      position: relative;
      width: 100%;
      // height: 340px;
      margin-bottom: 20px;
      .bg2 {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
      }

      .item-main {
        padding: 20px 30px;

        .total {
          margin-top: 10px;
          .total-item {
            width: 48%;
            margin-bottom: 19px;
            img {
              width: 80px;
              height: 80px;
              margin-right: 30px;
            }
            .nums {
              div:nth-child(1) {
                color: #f6d21e;
                font-weight: bold;
                font-size: 30px;
              }
              div:nth-child(2) {
                color: #c0c3da;
                font-weight: bold;
                font-size: 18px;
              }
            }
          }
        }
        .chart1 {
          height: 230px;
        }
        // #chart1{
        //   width: 1000px;
        // }
        .list1 {
          color: white;
          margin-top: 5px;
          .list-item {
            font-size: 18px;
            padding: 6px 0;
            img {
              width: 80px;
              height: 80px;
              object-fit: cover;
            }
            .item-info {
              width: 80%;
            }
            div {
              font-size: 16px;
            }
            // div:nth-child(1) {
            //   width: 80%;
            //   overflow: hidden;
            //   white-space: nowrap; //内容超出不换行
            //   text-overflow: ellipsis;
            // }
            .item-tit {
              overflow: hidden;
              white-space: nowrap; //内容超出不换行
              text-overflow: ellipsis;
            }
            .create_time {
              color: #ffdd00;
              margin-top: 5px;
              text-align: right;
              font-size: 12px;
              margin-top: 15px;
            }
          }
          .list-nav {
            background: #b97c11;
            font-size: 20px;
          }
          .seamless-warp {
            height: 250px;
            overflow: hidden;
          }
        }
        .list2 {
          // background: #A44D02;
          font-size: 14px;
          padding: 10px 0;
          .list-nav {
            // background: #a44d02;
            color: #fff;
          }
          .list-item {
            // background: #a44d02;
            margin-top: 5px;
            padding: 8px 15px;
          }
          .list-nav {
            background: #14797d;
            padding: 11px 0;
          }
          .list-flex {
            flex: 1;
            text-align: center;
          }
          .list-item6 {
            .list-flex {
              overflow: hidden;
              white-space: nowrap; //内容超出不换行
              text-overflow: ellipsis;
              width: 32%;
              flex: none;
              padding: 0 10px;
            }
          }
          .position {
            font-size: 12px;
          }
          .list-item2 {
            border: none;
            color: white;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;
            .content {
              overflow: hidden; //超出隐藏
              text-overflow: ellipsis; //溢出用省略号...显示
              display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
              -webkit-box-orient: vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
              -webkit-line-clamp: 3; //表示显示的行数合上面两个属性，表示显示的行数
            }
          }
          // .scroll3 {
          //   height: 120px !important;
          // }
          .list-item3 {
            color: white;
            padding: 0;
            border: none;
            .head {
              width: 31px;
              height: 32px;
              object-fit: cover;
              border-radius: 50%;
            }
          }
          .time {
            text-align: right;
            color: #ffdd00;
            font-size: 12px;
            margin-top: 5px;
          }
          .list2-info {
            color: #fff;
            .list2-info-tit {
              font-size: 16px;
              margin-bottom: 10px;
            }
            div {
              color: #fff;
            }
          }
          .list2-tab {
            background: #c91f1f;
            color: white;
            font-size: 18px;
            height: fit-content;
            padding: 2px 8px;
            border-radius: 8px;
            width: fit-content;
            margin-left: auto;
            margin-top: 10px;
          }
          .seamless-warp {
            height: 150px;
            overflow: hidden;
          }
          .seamless-warpRZ {
            height: 120px;
            overflow: hidden;
          }
        }
        .chart2 {
          height: 230px;
        }
      }
    }
    .item1 {
      height: 222px;
    }
    .item2 {
      height: 225px;
    }
    .item3 {
      height: 196px;
      overflow: hidden;
      .item3-tit3 {
        overflow: hidden;
        white-space: nowrap; //内容超出不换行
        text-overflow: ellipsis;
        width: 68%;
      }
      .time3 {
        width: 30%;
      }
    }
    .item4 {
      height: 204px;
    }
    .item5 {
      height: 253px;
    }
    .item6 {
      height: 240px;
      color: white;
      .seamless-warp {
        height: 140px !important;
        .list-item6 {
          border: none;
          padding: 8px 0 !important;
          border-bottom: solid 1px #4460da;
          color: #a7c6ff;
        }
      }
    }
  }
  .show {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.452);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
  }

  .show-con {
    width: 1400px;
    height: 80%;
    position: absolute;
    color: white;
    left: 50%;
    margin-left: -700px;
    top: 10%;
    z-index: 5;
    background: #021959;
    .bg4 {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      left: 0;
      z-index: -1;
    }
    .show-main {
      margin: 30px 70px;
      .show-main-con {
        // max-height: 720px;
        // overflow-x: auto;
        height: 720px;
        .con-tit {
          text-align: center;
          font-size: 30px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .con-tit2 {
          text-align: left;
        }
        .con-time {
          color: rgb(187, 184, 184);
          font-size: 20px;
          text-align: right;
          margin-bottom: 10px;
        }
        .con-time2 {
          text-align: left;
        }
        .con-content2 {
          border-bottom: dotted 1px gainsboro;
          padding-bottom: 20px;
          margin-bottom: 20px;
          font-size: 20px;
          max-height: 520px;
          overflow-y: auto;
        }
        .reply_content {
          font-size: 20px;
          color: #ffdd00;
        }
      }
      #iframe {
        height: 686px;
        background: white;
      }
      .con-return {
        font-size: 27px;
        margin-bottom: 10px;
        text-align: right;
      }
      .title-tit {
        font-size: 30px;
        font-weight: bold;
        border-left: solid 4px #2bc0ef;
        padding-left: 10px;
      }
      .list-time {
        margin-top: 30px;
        font-size: 18px;
      }
      .show-list {
        background: #d63a00;
        margin-top: 16px;
        padding: 15px 15px;
        border-radius: 8px;

        .list-tit {
          // width: 350px;
          font-size: 26px;
        }
        img {
          width: 288px;
          height: 130px;
          object-fit: cover;
        }
      }
    }
  }
  .show-con2 {
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    padding: 20px;
    min-height: 600px;
    height: auto;
    .show-main2 {
      max-height: 800px;
      overflow-x: auto;
    }
    .show2-tit {
      text-align: center;
      font-size: 28px;
      padding: 0px 0 20px;
    }
    .show2-tit2 {
      border-left: solid 8px rgb(241, 49, 49);
      padding-left: 10px;
      font-size: 20px;
      margin-bottom: 10px;
    }
    .show-Lea {
      color: rgb(241, 159, 81);
      text-align: center;
      padding-bottom: 10px;
      span {
        margin-left: 30px;
      }
    }
    .lists {
      margin-bottom: 20px;
    }
    .list-con {
      flex-wrap: wrap;
      .show-list {
        background: rgba(255, 255, 255, 0.2);
        text-align: center;
        padding: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
        img {
          width: 80px;
          height: 80px;
          border-radius: 50%;
          object-fit: cover;
        }
        .tab {
          font-size: 14px;
          color: #f1a92d;
        }
      }
    }
  }
}
.show {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.452);
  display: flex;
  justify-content: center;
  align-items: center;
}
.show-con {
  width: 1400px;
  height: 804px;
  position: absolute;
  color: white;
  left: 50%;
  margin-left: -700px;
  top: 150px;
  z-index: 3;
  .bg4 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
  }
  .show-main {
    margin: 30px 70px;
    .show-main-con {
      max-height: 740px;
      overflow-x: auto;
      .con-tit {
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        margin-bottom: 20px;
      }
    }
    .show-main-conN {
      height: 740px;
    }
    #iframe {
      height: 686px;
      background: white;
    }
    .con-return {
      font-size: 27px;
      margin-bottom: 10px;
      text-align: right;
    }
    .title-tit {
      font-size: 30px;
      font-weight: bold;
      border-left: solid 4px #2bc0ef;
      padding-left: 10px;
    }
    .list-time {
      margin-top: 30px;
      font-size: 18px;
    }
    .show-list {
      background: #d63a00;
      margin-top: 16px;
      padding: 15px 15px;
      border-radius: 8px;
      .list-tit {
        // width: 350px;
        font-size: 26px;
      }
      img {
        width: 288px;
        height: 130px;
        object-fit: cover;
      }
    }
  }
}
.show4 {
  width: 80%;
  // height: 791.5px;
  position: absolute;
  left: 10%;
  top: 10%;
  z-index: 6;

  .show-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .show4-con {
    padding: 50px 81px 30px;
    .item-tit {
      width: 441px;
    }
    .show4-intro {
      color: #ffdd00;
      font-size: 14px;
      margin-bottom: 10px;
      height: 300px;
      overflow-y: auto;
      div {
        font-size: 14px !important;
      }
    }
    .show4-list {
      border: solid 1px #11efff;
      padding: 10px 15px 0;
      font-size: 14px;
      height: 290px;
      font-weight: bold;
      margin-right: 20px;
      // margin-bottom: 20px;
      width: 150px;
      color: white;
      background: linear-gradient(
        to right,
        rgba(5, 45, 89, 0.04),
        rgba(35, 123, 222, 0.27),
        rgba(64, 133, 210, 0.11)
      );
      img {
        width: 100px;
        height: 146px;
        margin: 0 auto 20px;
        display: block;
        object-fit: cover;
      }
      div {
        margin-bottom: 4px;
      }
      span {
        color: #00f6ff;
        // margin-right: 14px;
        display: block;
        width: 23%;
      }
      .show4-list-tit {
        color: #00f6ff;
        text-align: center;
        font-weight: bold;
        font-size: 16px;
      }
      .item-main {
        overflow: hidden;
        width: 240px;
        height: 180px;
        font-size: 12px;
        .time {
          text-align: right;
          color: #ffdd00;
          font-size: 8px;
        }
      }
    }
    .scroll3 {
      overflow: hidden;
      height: 308px;
    }
  }
}
.index .show5 {
  background: rgba(0, 0, 0, 0.7);
  .show5-con {
    width: 100%;
    // height: 100%;
    padding: 0 61px;

    .head-img {
      width: 704px;
      height: 940px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .head_bg {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
      .head_a {
        position: relative;
        width: 660px;
        height: 882px;
        display: block;
      }
    }
    .show5-con {
      font-size: 40px;
      width: 994px;

      .con1 {
        color: #ffdd00;
        // margin-bottom: 200px;
        font-weight: bold;
        line-height: 1.5;
      }
      .con2 {
        color: #ffffff;
        font-size: 38px;
        position: absolute;
        bottom: 30px;
        right: 0;
      }
    }
  }
}
.show6-con {
  padding: 20px;
  overflow-y: auto;
  // top: 0 !important;
  .list-item6 {
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.11);
    padding: 10px;
    img {
      width: 130px;
      height: 100px;
      object-fit: cover;
      margin-right: 20px;
    }
    .id_photo {
      width: 130px;
      height: 160px;
    }
    .item6-info {
      div:nth-child(1) {
        font-size: 24px;
      }
    }
    //     .list-flex{
    //       overflow: hidden;
    // white-space: nowrap;//内容超出不换行
    // text-overflow: ellipsis;

    //     }
  }
  .show6TRe {
    position: absolute;
    color: white;
    left: 20px;
    top: 20px;
    font-size: 28px;
  }
}
.show10 {
  .contentHtml {
    margin: 10px 0;
    overflow: hidden; //超出隐藏
    text-overflow: ellipsis; //溢出用省略号...显示
    display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 3; //表示显示的行数合上面两个属性，表示显示的行数
  }
  .contentHtml2 {
    overflow: hidden; //超出隐藏
    text-overflow: ellipsis; //溢出用省略号...显示
    display: -webkit-box; //将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //从上到下垂直 排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 2; //表示显示的行数合上面两个属性，表示显示的行数
  }
  .show10Time {
    margin-top: 10px;
    color: #00f6ff;
    font-size: 14px;
  }
  .show10Title {
    overflow: hidden;
    white-space: nowrap; //内容超出不换行
    text-overflow: ellipsis;
  }
}
</style>